<template>
  <div class="wrapper">
    <div class="form-container">
      <el-form
        label-position="top"
        :model="ruleForm"
        class="quality-file"
        label-width="150px"
        :inline="true"
        :rules="rules"
        ref="ruleForm"
        :disabled="disable"
        :key="ruleForm.id"
      >
        <el-card shadow="never" class="info-card">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="文件名称" prop="file_name">
                <el-input
                  v-model="ruleForm.file_name"
                  maxlength="30"
                ></el-input>
              </el-form-item>
              <el-form-item label="文件类型" prop="file_type">
                <el-select
                  v-model="ruleForm.file_type"
                  @change="handleChangeFileType"
                  placeholder="请选择文件类型"
                  :disabled="mode === 'detail'"
                >
                  <el-option
                    v-for="item in typeData"
                    :label="item.formwork_name"
                    :value="item.id + ''"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文件编码" prop="file_code">
                <el-input
                  v-model="ruleForm.file_code"
                  maxlength="30"
                ></el-input>
              </el-form-item>

              <el-form-item label="文件级别" prop="file_level">
                <el-radio-group v-model="ruleForm.file_level">
                  <el-radio label="1">I级</el-radio>
                  <el-radio label="2">II级</el-radio>
                  <el-radio label="3">III级</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="文件版本" prop="file_edition">
                <el-input
                  v-model="ruleForm.file_edition"
                  maxlength="20"
                ></el-input>
              </el-form-item>
              <el-form-item label="发布部门" prop="issue_department">
                <el-cascader
                  ref="cascader"
                  :options="branchData"
                  :show-all-levels="false"
                  v-model="ruleForm.issue_department"
                  :props="{
                    emitPath: false,
                    checkStrictly: true,
                    label: 'branch_name',
                    value: 'id',
                    children: 'next_level_data',
                  }"
                  clearable
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="起草人" prop="drafting">
                <el-select v-model="ruleForm.drafting" filterable clearable>
                  <el-option
                    v-for="handler in staffData"
                    :key="handler.id"
                    :label="handler.name"
                    :value="handler.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="起草日期" prop="drafting_time">
                <el-date-picker
                  v-model="ruleForm.drafting_time"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="timestamp"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="审核人" prop="reviewer">
                <el-select v-model="ruleForm.reviewer" filterable clearable>
                  <el-option
                    v-for="handler in staffData"
                    :key="handler.id"
                    :label="handler.name"
                    :value="handler.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="审核日期" prop="review_time">
                <el-date-picker
                  v-model="ruleForm.review_time"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="timestamp"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="批准人" prop="approved_user">
                <el-select
                  v-model="ruleForm.approved_user"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="handler in staffData"
                    :key="handler.id"
                    :label="handler.name"
                    :value="handler.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="批准日期" prop="approved_time">
                <el-date-picker
                  v-model="ruleForm.approved_time"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="timestamp"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="info-card">
          <el-form-item label="生效日期" prop="effective_time">
            <el-date-picker
              @change="setExpireTime"
              v-model="ruleForm.effective_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="应复审日期" prop="expire_time">
            <el-date-picker
              v-model="ruleForm.expire_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="通知负责人复审时间" prop="advance_notice_day">
            <el-date-picker
              v-model="ruleForm.advance_notice_day"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="负责人" prop="superintendent">
            <el-select v-model="ruleForm.superintendent" filterable clearable>
              <el-option
                v-for="handler in staffData"
                :key="handler.id"
                :label="handler.name"
                :value="handler.id + ''"
              />
            </el-select>
          </el-form-item>
        </el-card>
        <div class="card-wrap">
          <el-card shadow="never" class="info-card left">
            <el-popover
              v-permission="'qms_file_update'"
              placement="bottom"
              width="400"
              trigger="click"
              :visible-arrow="false"
            >
              <el-table :data="templates">
                <el-table-column property="file_name" label="模板">
                </el-table-column>
                <el-table-column
                  prop=""
                  fixed="right"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      plain
                      size="mini"
                      @click="handleTemplateDownload(scope.row)"
                      >下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                size="small"
                style="margin-right: 10px"
                slot="reference"
                >下载模板</el-button
              >
            </el-popover>
            <el-form-item
              label=""
              prop="contents"
              ref="imgRef0"
              style="margin-right: 0 !important"
            >
              <UploadLink
                style="display: inline-block; margin-right: 10px"
                :files.sync="ruleForm.contents"
                :dataProp="{
                  name_key: 'file_name',
                  url_key: 'file_url',
                }"
                :showFileList="false"
              ></UploadLink>
            </el-form-item>
            <!-- <el-popover v-permission="'qms_file_update'" v-show="mode !== 'add'" :disabled="false" width="400"
                            key="2" v-model="visible" :visible-arrow="true" placement="bottom">
                            <div @click.stop>
                                <el-form-item label="盖章文件" prop="">
                                <el-select v-model="sealForm.id" @change="handleSealChange" filterable clearable>
                                    <el-option v-for="handler in sealData" :key="handler.id" :label="handler.name"
                                        :value="handler.id * 1" />
                                </el-select>
                                </el-form-item>
                                <el-link :href="sealForm.url" type="primary">{{ sealForm.url }}</el-link>
                                <div style="text-align: right;">
                                    <el-button v-permission="'qms_file_update'" style="margin-top: 15px;"
                                        v-show="mode !== 'add'" :disabled="false" @click="handleExport" type="primary"
                                        size="mini">导出</el-button>
                                </div>
                            </div>

                            <el-button type="primary" size="small" style="margin-right: 10px;"
                                slot="reference">导出文件</el-button>
                        </el-popover> -->
            <el-button
              v-permission="'qms_file_update'"
              v-show="mode !== 'add'"
              :disabled="false"
              @click="showSealDialog"
              type="primary"
              size="small"
              >导出文件</el-button
            >
            <el-button
              v-permission="'qms_file_export_list'"
              v-show="mode !== 'add'"
              :disabled="false"
              @click="handleExportRecord"
              type="primary"
              size="small"
              >导出记录</el-button
            >
            <ul class="file-list">
              <li v-for="(item, index) in ruleForm.contents" :key="index">
                <div>
                  <i
                    class="el-icon-document"
                    style="padding-right: 5px; font-size: 14px"
                  ></i>
                  <el-link
                    :underline="false"
                    class="link-text"
                    :href="item.file_url"
                    target="_blank"
                    >{{ item.file_name }}</el-link
                  >
                </div>
                <div>
                  <i
                    style="margin-left: 10px"
                    @click="handleDelFile(index)"
                    v-show="mode !== 'detail'"
                    class="el-icon-close file-icon"
                  ></i>
                </div>
              </li>
            </ul>
          </el-card>
          <!-- <div>
                    </div> -->
          <el-card shadow="never" class="info-card right">
            <div v-if="ruleForm.change_all" style="padding-bottom: 20px">
              变更记录
            </div>
            <el-timeline :reverse="false">
              <el-timeline-item
                v-for="(activity, index) in ruleForm.change_all"
                :key="index"
                :timestamp="activity.timestamp"
              >
                {{ activity.change_count }}
                <el-tag>{{ activity.user_name }}</el-tag>
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </div>
      </el-form>
      <div v-if="ruleForm.controlled_status === '1'" class="control-tag">
        受控
      </div>
    </div>
    <div class="operation-footer">
      <div class="footer-wrap">
        <el-button size="small" @click="handleClickClose">关闭</el-button>
        <template v-if="mode !== 'detail'">
          <el-button
            v-permission="'qms_file_update'"
            v-show="mode !== 'detail' && ruleForm.status !== '2'"
            size="small"
            type="primary"
            @click="handleClickSubmit"
            >保存</el-button
          >
          <template v-if="mode !== 'add' && ruleForm.status !== '2'">
            <el-button
              v-permission="'qms_file_reexamine'"
              v-show="ruleForm.reexamine_status === '0'"
              size="small"
              type="primary"
              @click="handleOperation('reExam')"
              >复审通过</el-button
            >
            <el-button
              v-permission="'qms_file_controlled'"
              v-show="ruleForm.controlled_status === '0'"
              size="small"
              type="primary"
              @click="handleOperation('control')"
              >转为受控文件</el-button
            >
            <el-button
              v-permission="'qms_file_controlled'"
              v-show="ruleForm.controlled_status === '1'"
              size="small"
              type="primary"
              @click="handleOperation('cancelControl')"
              >取消受控</el-button
            >
            <el-button
              v-permission="'qms_file_cancel'"
              v-show="ruleForm.status !== '2'"
              size="small"
              type="primary"
              @click="handleOperation('delete')"
              >作废</el-button
            >
            <el-button
              v-permission="'qms_file__change_create'"
              size="small"
              type="primary"
              @click="handleOperation('record')"
              >记录变更</el-button
            >
            <el-button
              v-permission="'qms_file__create'"
              size="small"
              type="primary"
              @click="handleOperation('newVersion')"
              >生成新版本</el-button
            >
          </template>
          <el-button
            v-permission="'qms_file_cancel'"
            v-show="ruleForm.status === '2'"
            size="small"
            type="primary"
            @click="handleOperation('cancelDelete')"
            >取消作废</el-button
          >
        </template>
      </div>
    </div>
    <el-dialog
      title="记录变更"
      width="500px"
      :close-on-click-modal="false"
      v-if="recordDialogVisible"
      :modal-append-to-body="false"
      @close="handleCloseRecordDialog"
      :visible="recordDialogVisible"
    >
      <el-form
        :model="recordForm"
        :rules="recordRules"
        ref="ruleForm"
        style="width: 400px"
        label-width="80px"
      >
        <el-form-item label="变更人" prop="user_id">
          <el-select
            v-model="recordForm.user_id"
            @change="handleChangeUser"
            filterable
            clearable
          >
            <el-option
              v-for="handler in staffData"
              :key="handler.id"
              :label="handler.name"
              :value="handler.id + ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="变更时间" prop="change_time">
          <el-date-picker
            v-model="recordForm.change_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="变更内容" prop="change_count">
          <el-input
            type="textarea"
            v-model="recordForm.change_count"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" style="text-align: center; padding-top: 20px">
        <el-button @click="handleCloseRecordDialog">取 消</el-button>
        <el-button type="primary" @click="handleRecordOk">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出记录" :visible.sync="exportDialogVisble">
      <el-table
        max-height="400"
        :data="exportData"
        border
        stripe
        align="center"
      >
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column
          property="user_name"
          label="导出人"
          width="200"
        ></el-table-column>
        <el-table-column property="export_time" label="导出时间">
          <template slot-scope="scope">
            <span v-time="scope.row.export_time"></span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="导出文件"
      :visible.sync="sealDialogVisble"
      custom-class="customWidth"
    >
      <el-form>
        <el-form-item label="文件盖章" prop="">
          <el-select
            v-model="sealForm.id"
            style="width: 220px"
            @change="handleSealChange"
            filterable
            clearable
          >
            <el-option
              v-for="handler in sealData"
              :key="handler.id"
              :label="handler.name"
              :value="handler.id * 1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="seal-img" v-if="sealForm.url && isImg(sealForm.url)">
        <img :src="sealForm.url" />
      </div>
      <el-link v-else :href="sealForm.url" type="primary">{{
        sealForm.url
      }}</el-link>
      <div style="text-align: center; margin-top: 25px">
        <el-button @click="sealDialogVisble = false" size="mini"
          >关闭</el-button
        >
        <el-button
          v-permission="'qms_file_update'"
          v-show="mode !== 'add'"
          :disabled="false"
          :loading="exportLoading"
          @click="handleExport"
          type="primary"
          size="mini"
          >导出</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadLink from "@/components/uploadFile/uploadLink.vue";
import { organizationBox } from "@/api/organization";
import { AdminBox } from "@/api/customer";
import {
  fileCreate,
  fileDetail,
  fileUpdate,
  fileReExamine,
  fileControlled,
  fileCancel,
  formworkList,
  fileChangeCreate,
  fileExport,
  fileExportList,
} from "@/api/qms.js";
import { downloadFile, timestamp10 } from "@/utils/mUtils";
import { signatureList } from "@/api/auditing";

export default {
  name: "qualityFile",
  components: { UploadLink },
  props: [],
  data() {
    return {
      mode: "add",
      sealData: [],
      sealForm: {
        id: "",
        url: "",
      },
      ruleForm: {
        file_type: "", // 文件类型
        file_code: "", // 文件编码
        file_name: "", // 文件名称
        file_level: "", // 文件级别
        file_edition: "", // 文件版本
        issue_department: "", // 发放部门
        drafting: "", // 起草人
        drafting_time: Date.now(), // 起草日期
        reviewer: "", // 审核人
        review_time: Date.now(), // 审核日期
        approved_user: "", // 批准人
        approved_time: Date.now(), // 批准日期
        effective_time: Date.now(), // 生效时间
        expire_time: "", // 复审时间
        advance_notice_day: "", // 提前几天通知
        superintendent: "", // 负责人
        contents: [], // 上传文件
      },
      rules: {
        file_type: [
          { required: true, message: "请选择文件类型", trigger: "change" },
        ],
        file_code: [
          { required: true, message: "请输入文件编码", trigger: "blur" },
        ],
        file_name: [
          { required: true, message: "请输入文件名称", trigger: "blur" },
        ],
        file_level: [
          { required: true, message: "请选择文件级别", trigger: "change" },
        ],
        file_edition: [
          { required: true, message: "请输入文件版本", trigger: "blur" },
        ],
        issue_department: [
          { required: true, message: "请选择发布部门", trigger: "change" },
        ],
        drafting: [
          { required: true, message: "请选择起草人", trigger: "change" },
        ],
        drafting_time: [
          { required: true, message: "请选择起草日期", trigger: "change" },
        ],

        reviewer: [
          { required: true, message: "请选择审核人", trigger: "change" },
        ],
        review_time: [
          { required: true, message: "请选择审核日期", trigger: "change" },
        ],
        approved_user: [
          { required: true, message: "请选择批准人", trigger: "change" },
        ],
        approved_time: [
          { required: true, message: "请选择批准日期", trigger: "change" },
        ],
        effective_time: [
          { required: true, message: "请选择生效日期", trigger: "change" },
        ],
        expire_time: [
          { required: true, message: "请选择应复审日期", trigger: "change" },
        ],
        advance_notice_day: [
          {
            required: true,
            message: "请选择应通知负责人复审时间",
            trigger: "change",
          },
        ],
        superintendent: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
        contents: [
          { required: true, message: "请上传文件", trigger: "change" },
        ],
      },
      branchData: [],
      staffData: [],
      typeData: [],
      recordForm: {},
      recordRules: {},
      recordDialogVisible: false,
      templates: [],
      exportDialogVisble: false,
      exportData: [],
      sealDialogVisble: false,
      exportLoading: false,
    };
  },
  computed: {
    disable() {
      return this.mode === "detail" || this.ruleForm.status === "2";
    },
  },
  watch: {
    "ruleForm.contents": function (val) {
      this.$refs.imgRef0.clearValidate();
    },
    $route: {
      handler: function () {
        this.handleChangeMode();
      },
      immediate: true,
      deep: true,
    },
  },
  async mounted() {
    this.mode = this.$route.query.mode || "add";
    organizationBox({ not_show_first_branch: 1 }).then((res) => {
      this.branchData = res.data;
      // console.log( this.branchData)
    });
    AdminBox({
      user_type: "0",
    }).then((res) => {
      this.staffData = res.data;
    });
    await this.getData();
    this.handleChangeMode();
    signatureList({
      page: 1,
      page_size: 1000,
    }).then((res) => {
      if (res.code === 10000 || res.data.list.length > 0) {
        this.sealData = res.data.list;
      }
    });
  },

  methods: {
    handleSealChange(val) {
      const item = this.sealData.find((item) => item.id === Number(val));
      if (item) {
        this.sealForm["url"] = item.image_url;
      } else {
        this.sealForm["url"] = "";
      }
    },
    isImg(filename) {
      var mime = filename.toLowerCase().substr(filename.lastIndexOf(".") + 1);
      return ["jpg", "jpeg", "webp", "png"].includes(mime);
    },
    showSealDialog() {
      this.sealForm = {
        id: "",
        url: "",
      };
      this.sealDialogVisble = true;
    },
    handleChangeMode() {
      this.mode = this.$route.query.mode || "add";
      if (this.mode === "add") {
        this.initNewVersionFile();
        this.setExpireTime();
      } else if (this.mode === "detail" || this.mode === "edit") {
        this.getDetail();
      }
    },
    initNewVersionFile() {
      const data = localStorage.getItem("file_NewVersionFormData");
      if (data) {
        const formData = JSON.parse(data);
        localStorage.removeItem("file_NewVersionFormData");
        this.ruleForm = formData;
      } else {
        Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      }
    },
    async getData() {
      // 获取文件类型及对应的模板
      const res = await formworkList({
        page: 1,
        page_size: 1000,
      });
      if (res.code === 10000) {
        this.typeData = res.data.list;
      }
    },
    // 记录变更-变更人发生变化
    handleChangeUser() {
      if (this.recordForm.user_id) {
        const item =
          this.staffData.find((item) => item.id == this.recordForm.user_id) ||
          {};
        this.recordForm.user_name = item.name;
      } else {
        this.recordForm.user_name = "";
      }
    },
    handleExport() {
      this.exportLoading = true;
      fileExport({
        record_id: this.ruleForm.id + "",
        parent_record_id: this.ruleForm.parent_id + "",
        common_seal: this.sealForm.url,
      }).then((res) => {
        // console.log(res);
        const data = res.data.export_list;
        this.exportLoading = false;

        if (data) {
          for (let i = 0; i < data.length; i++) {
            downloadFile(
              data[i].file_name +
                `_${this.$moment(Date.now()).format("YYYY-MM-DD")}` +
                ".pdf",
              data[i].file_url
            );
          }
        }
      });
    },
    handleExportRecord() {
      fileExportList({
        record_id: this.ruleForm.id + "",
        parent_record_id: this.ruleForm.parent_id + "",
        page: 1,
        page_size: 10000,
      }).then((res) => {
        if (res.code === 10000) {
          this.exportData = res.data.list;
          this.exportDialogVisble = true;
        }
      });
    },
    // 设置应复审日期是生效日期1年后
    setExpireTime() {
      if (this.ruleForm.effective_time) {
        // console.log(this.$moment(new Date(this.ruleForm.effective_time)).add(1, 'years').valueOf(), '================+==============');
        this.ruleForm.expire_time = this.$moment(
          new Date(this.ruleForm.effective_time)
        )
          .add(1, "years")
          .valueOf();
      } else {
        this.ruleForm.expire_time = "";
      }
    },
    // 获取文件详情
    async getDetail() {
      const res = await fileDetail({
        id: this.$route.query.id * 1,
      });
      const data = res.data.data;
      this.ruleForm = this.detailConvert(data);
      this.handleChangeFileType();
    },
    detailConvert(data) {
      data.issue_department =
        data.issue_department && data.issue_department * 1;
      data.drafting_time = data.drafting_time * 1000 || "";
      data.review_time = data.review_time * 1000 || "";
      data.approved_time = data.approved_time * 1000 || "";
      data.expire_time = data.expire_time * 1000 || "";
      data.effective_time = data.effective_time * 1000 || "";
      data.advance_notice_day = data.advance_notice_day * 1000 || "";
      data.drafting = data.drafting === "0" ? "" : data.drafting;
      data.reviewer = data.reviewer === "0" ? "" : data.reviewer;
      data.approved_user = data.approved_user === "0" ? "" : data.approved_user;
      data.superintendent =
        data.superintendent === "0" ? "" : data.superintendent;
      if (data.change_all) {
        data.change_all.forEach((item) => {
          item.timestamp = this.$moment(item.change_time * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
      }
      return data;
    },
    getConvertForm() {
      return {
        ...this.ruleForm,
        issue_department: this.ruleForm.issue_department
          ? this.ruleForm.issue_department + ""
          : "",
        drafting_time: timestamp10(this.ruleForm.drafting_time) || "",
        review_time: timestamp10(this.ruleForm.review_time) || "",
        approved_time: timestamp10(this.ruleForm.approved_time) || "",
        expire_time: timestamp10(this.ruleForm.expire_time) || "",
        effective_time: timestamp10(this.ruleForm.effective_time) || "",
        advance_notice_day: timestamp10(this.ruleForm.advance_notice_day) || "",
      };
    },
    // 创建、编辑的保存
    handleClickSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        const _ruleForm = this.getConvertForm();
        if (this.mode === "add") {
          fileCreate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "新建成功",
                type: "success",
              });
              this.$router.push({
                name: "fileRecordList",
              });
            }
          });
        } else {
          fileUpdate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
          });
        }
      });
    },
    // 下载模板
    handleTemplateDownload(row) {
      downloadFile(row.file_name, row.file_url);
    },
    // 文件类型变化
    handleChangeFileType() {
      const selectItem =
        this.typeData.find((item) => item.id == this.ruleForm.file_type) || {};
      this.templates = selectItem.formwork_list || [];
    },
    // 记录变更提交
    handleRecordOk() {
      const _recordForm = {
        ...this.recordForm,
        change_time: timestamp10(this.recordForm.change_time) || "",
        record_id: this.ruleForm.id + "",
        parent_record_id: this.ruleForm.parent_id + "",
      };
      fileChangeCreate(_recordForm).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "文件变更记录成功",
            type: "success",
          });
          this.handleCloseRecordDialog();
          this.getDetail();
        }
      });
    },
    // 关闭记录变更弹框
    handleCloseRecordDialog() {
      this.recordDialogVisible = false;
    },
    // 操作
    handleOperation(type) {
      switch (type) {
        // 复审通过
        case "reExam":
          fileReExamine({
            id: this.ruleForm.id,
            reexamine_status: "1",
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "复审通过",
                type: "success",
              });
              this.getDetail();
            }
          });
          break;
        // 转为受控
        case "control":
          fileControlled({
            id: this.ruleForm.id,
            controlled_status: "1",
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "转为受控文件成功",
                type: "success",
              });
              this.getDetail();
            }
          });
          break;
        // 取消受控
        case "cancelControl":
          fileControlled({
            id: this.ruleForm.id,
            controlled_status: "0",
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "取消受控成功",
                type: "success",
              });
              this.getDetail();
            }
          });
          break;
        // 作废
        case "delete":
          fileCancel({
            id: this.ruleForm.id,
            status: "2",
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "文件作废成功",
                type: "success",
              });
              this.handleClickClose();
            }
          });
          break;
        // 作废
        case "cancelDelete":
          fileCancel({
            id: this.ruleForm.id,
            status: "1",
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "文件已生效",
                type: "success",
              });
              this.getDetail();
              // this.handleClickClose();
            }
          });
          break;

        // 记录变更
        case "record":
          this.initRecordForm();
          this.recordDialogVisible = true;
          break;
        // 生成新版本
        case "newVersion":
          this.initRecordForm();
          const _recordForm = {
            ...this.recordForm,
            change_time: timestamp10(this.recordForm.change_time) || "",
            change_count: "生成新版本",
            // record_id: res.data.id + '',
            // parent_record_id: this.ruleForm.id + ''
            record_id: this.ruleForm.id + "",
          };
          fileChangeCreate(_recordForm).then(async (res2) => {
            if (res2.code === 10000) {
              this.$message({
                message: "生成新版本成功",
                type: "success",
              });
              await this.getDetail();
              const _ruleForm = this.getConvertForm();
              _ruleForm.parent_id = _ruleForm.id + "";
              const clearKeys = [
                "id",
                "file_edition",
                "drafting",
                "drafting_time",
                "reviewer",
                "review_time",
                "approved_user",
                "approved_time",
                "effective_time",
                "expire_time",
                "advance_notice_day",
                "superintendent",
              ];
              clearKeys.forEach((key) => {
                _ruleForm[key] = undefined;
              });
              const newFormData = this.detailConvert(_ruleForm);
              localStorage.setItem(
                "file_NewVersionFormData",
                JSON.stringify(newFormData)
              );
              setTimeout(() => {
                this.$router.push({
                  name: "qualityFile",
                  query: {
                    mode: "add",
                  },
                });
              }, 200);
            }
          });
          break;
        default:
          break;
      }
    },
    initRecordForm() {
      const { user_id } = this.$store.state.user || {};
      this.recordForm = {
        user_id: user_id + "",
        user_name: "",
        change_time: Date.now(),
        change_count: "",
      };
      this.handleChangeUser();
    },
    // 文件删除
    handleDelFile(index) {
      this.$confirm(`确定要删除吗？`).then((res) => {
        this.ruleForm.contents.splice(index, 1);
      });
    },
    // 关闭-返回列表
    handleClickClose() {
      this.$router.push({
        name: "fileRecordList",
      });
    },
    // 上传文件
    handleChange(file, fileList, index) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, 30).then((result) => {
        var resname = result.name;
        this.ImportDataUrl = resname;
        var filehttp = "http://oss.dushisc.com/";
        this.ruleForm.files.push({
          name: filehttp + result.name,
          url: filehttp + result.name,
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  /deep/.customWidth {
    width: 400px !important;

    .el-dialog__body {
      padding: 20px 55px;
    }
  }

  // min-height: 100vh;
  .form-container {
    box-sizing: border-box;
    padding: 10px;
    padding-top: 10px;
    position: relative;

    .control-tag {
      position: absolute;
      top: 35px;
      right: 50px;
      width: 100px;
      height: 40px;
      text-align: center;
      line-height: 40px;

      color: rgb(149, 29, 29);
      border: solid 1px rgb(149, 29, 29);
      transform: rotate(25deg);
    }
  }

  .quality-file {
    .el-input {
      width: 200px;
    }

    .el-select,
    .el-cascader {
      width: 200px;
    }

    .el-textarea {
      width: 400px;
    }

    /deep/ .el-form-item {
      margin-right: 30px !important;
    }
  }

  .box-card {
    width: 450px;

    /deep/.el-card__body {
      padding: 10px;
    }
  }

  .operation-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: white;
    box-sizing: border-box;
    padding: 15px 0;
    box-shadow: 0px -10px 20px -10px rgba(0, 0, 0, 0.07);
    z-index: 100;

    .footer-wrap {
      width: 86.3%;
      text-align: center;
    }
  }

  .info-card {
    border: none;
    margin-bottom: 10px;

    &.left {
      width: 60%;
    }

    &.right {
      width: 39.5%;
      margin-left: 10px;
    }
  }

  .card-wrap {
    display: flex;
    justify-content: space-around;
    min-height: 200px;

    .info-card {
      display: inline-block;
      min-height: 100%;
    }
  }

  .file-list {
    width: 100%;
    // padding-top: 10px;

    li {
      // width: 60%;
      display: flex;
      // justify-content: space-between;
      padding-bottom: 5px;
      align-items: center;

      .file-icon {
        cursor: pointer;
        font-size: 14px;

        &:hover {
          color: #409eff;
          // transform: scale(1.5);
          // transition: all ease 0.2s;
        }
      }

      .link-text {
        justify-content: flex-start;

        /deep/.el-link--inner {
          width: 400px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .seal-img {
    width: 100%;

    img {
      width: 100%;
    }
  }
}
</style>